<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>ExtJs Desktop</title>
	<?php echo css_asset('ext-all.css'); ?>
	<?php echo js_asset('ext-all.js'); ?>
    <script type="text/javascript">
		Ext.require([
			'Ext.tip.QuickTipManager',
			'Ext.menu.*',
			'Ext.form.field.ComboBox',
			'Ext.layout.container.Table',
			'Ext.container.ButtonGroup'
		]);
		
		Ext.onReady(function(){
			var ToggleApplicationWindow = function(AppId){
				var win = Ext.getCmp(AppId);
				win.setVisible(!win.isVisible());
			}
			var AddToolbarItem = function(id, text, img_path, url){
				var toolbar = Ext.getCmp('BottomMainToolbar');
				toolbar.add({
					id : 'ToolbarMenu' + id,
					text : text,
					icon : img_path,
					enableToggle : true,
					pressed : true,
					handler : function(){
						ToggleApplicationWindow('AppWindow' + id);
					}
				});
				CreateApplicationWindow(id, text, url);
			}
			var RemoveToolbarItem = function(id){
				var toolbar = Ext.getCmp('BottomMainToolbar');
				var items = toolbar.items.items;
				for(var i=0;i<items.length;i++){
					if(items[i].id == id){
						toolbar.remove(i);
					}
				}
			}
			var CreateApplicationWindow = function(id, text, url){
				if(typeof(Ext.getCmp("AppWindow" + id)) === "undefined"){
					var window = Ext.create('Ext.window.Window', {
						id : 'AppWindow' + id,
						title: text,
						height: 500,
						width: 500,
						minimizable	: true,
						maximizable	: true,
						layout: 'fit',
						constrain : true,
						autoScroll : true,
						maximized : true,
						autoLoad:{url:url,scripts:true},
						listeners : {
							'beforeclose' : function(){
								RemoveToolbarItem("ToolbarMenu" + id);
							},
							'minimize' : function(){
								this.setVisible(false);
								Ext.getCmp('ToolbarMenu' + id).toggle();
							}
						}
					});
					MainViewport.child('[region=center]').add(window);
					window.show();
				}else{
					var window = Ext.getCmp("AppWindow" + id);
					window.setVisible(true);
				}
			}
			var MainMenu = Ext.create('Ext.panel.Panel',{
				title : 'Menu',
				height : 400,
				width : 300,
				layout : 'form',
				border : false,
				items : [{
					layout : 'column',
					border : false,
					height : '100%',
					items : [{
						columnWidth : 0.5,
						columnHeight : '100%',
						layout : 'form',
						border : false,
						items : [
							Ext.create('Ext.menu.Menu', {
								width: '100%',
								height : 400,
								plain: true,
								floating: false,
								items: [{
									text: 'App1',
									handler : function(){
										AddToolbarItem('App1','Application1','','');
									}
								},{
									text: 'App2',
									handler : function(){
										AddToolbarItem('App2','Application2','','');
									}
								},{
									text: 'App3',
									handler : function(){
										AddToolbarItem('App3','Application3','','');
									}
								}]
							})
						]
					},{
						columnWidth : 0.5,
						columnHeight : '100%',
						layout : 'form',
						border : false,
						items : [
							Ext.create('Ext.menu.Menu', {
								width: '100%',
								height : 400,
								plain: true,
								floating: false,
								items: [{
									text: 'Setting',
									icon : 'assets/images/icons/fam/cog.png',
									handler : function(){
										AddToolbarItem('Setting','Setting','assets/images/icons/fam/cog.png','index.php/welcome');
									}
								}]
							})
						]
					}]
				}]
			});
			var BottomMainToolbar = Ext.create('Ext.toolbar.Toolbar', {
				id : 'BottomMainToolbar',
				width : '100%',
				height : 30,
				region : 'south',
				items: [
					{
						xtype:'button',
						width : 40,
						iconAlign : 'top',
						icon : 'assets/images/icons/fam/cog.png',
						text: '',
						menu: [ MainMenu ],
						arrowCls: ''
					}, '-'
				]
			});
			var MainViewport = Ext.create('Ext.Viewport', {
				layout : {
					type : 'border'
				},
				items : [
					{
						region : 'center',
						width : '100%'
					},
					BottomMainToolbar
				]
			});
		});
    </script>
</head>
<body>
</body>
</html>